<!doctype html>
<html lang="en" data-framework="jquery">
	<head>
		<meta charset="utf-8">
		<title>jQuery • TodoMVC</title>
		<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
		<link rel="stylesheet" href="css/app.css">
		<style>
			.delete{
				/* 删除线 */
				text-decoration:line-through;
			}
		</style>
	</head>
	<body>
		<section id="app" class="todoapp">
			<header class="header">
				<h1>todos</h1>
				<input @keyup.Enter="addTodos" v-model="text" class="new-todo" placeholder="What needs to be done?" autofocus>
			</header>
			<section class="main">
				<input id="toggle-all" class="toggle-all" type="checkbox">
				<label for="toggle-all">Mark all as complete</label>
				<ul class="todo-list">
					<li v-for="(item,index) in showList" :key="item.id" data-id="21d489b2-8195-469a-93c5-7b409640f913">
						<div class="view">
							<input @click="hanldChecked(item)" v-model="item.checked" class="toggle" type="checkbox">
							<label :class="item.checked?'delete':''">{{item.title}}</label>
							<button @click="delTodos(item,index)" class="destroy"></button>
						</div>
						<!-- 用来修改数据的，现在暂时用不到 -->
						<!-- <input class="edit" value="8:50-9:00 读单词"> -->
					</li>
				</ul>
			</section>
			<footer class="footer">
				<span class="todo-count">
					剩余
					<strong>{{num}}</strong> 
					个未完成
				</span>
				<ul class="filters">
					<li @click="select('全部')">
						<a>全部</a>
					</li>
					<li @click="select('未完成')">
						<a>未完成</a>
					</li>
					<li @click="select('已完成')">
						<a >已完成</a>
					</li>
				</ul>
				<button @click="clearYesTodos" class="clear-completed">清除已完成</button>
			</footer>
		</section>

		<script src="./node_modules/vue/dist/vue.min.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					//输入的内容
					text:'xxxx',
					//渲染需要展示出来的数据数组
					list:[
						{
							id:2234567869,
							title:'上午好',
							checked:false
						},
						{
							id:2234567868,
							title:'中午好',
							checked:true
						},
						{
							id:2234567860,
							title:'下午好',
							checked:true
						},
					],
					// 用来展示的数组
					showList:[],
					// 未完成的数量
					num:0,
				},
				// 在这个钩子函数开始的时候，就开始赋值
				created(){
					this.showList = this.list;
					// 筛选除未完成的任务，并赋值于未完成的数量
					var oldList = this.list.filter(item=>!item.checked)
					this.num = oldList.length
				},
				methods:{
					//添加数据
					addTodos(){
						// 当选择了全部/未完成/已完成的任何一个按钮时，再添加新的任务时，需要显示除所有全部的任务
						this.showList = this.list;
						// 每添加一条任务默认是未完成的，所以只需要自加1就行
						this.num++;
						// 创捷一条数据，是以对象的形式，并且和之前的数据相同的类型
						let data = {
							id:Date.now(),
							title:this.text,
							checked:false
						}
						if(this.text.length>0){
							// 添加数组成员(注意在输入框中存在内容的时候才能够添加数据)
							this.list.push(data);
							// 清除输入框中的内容
							// this.text = ''
						}else{
							alert('请输入内容')
						}
					},
					// 删除数组成员,接受成员的索引号
					delTodos(item,index){
						// 判断点击删除的这个任务是否是未完成的，如果是未完成的那么减1
						if(!item.checked){
							this.num--
						}
						// 使用splice来任意删除数组中的成员,从该索引号开始向后截取删除一个
						this.list.splice(index,1)
					},
					// 选择按钮
					select(selText){
						// 使用filter过滤遍历数组会返回一个新的数组，通过数组成员的checked的变量的值来判断
						if(selText==="全部"){
							// 选择是全部的时候
							this.showList = this.list
						}else if (selText==="未完成") {
							// 选择是未完成的时候,
							this.showList = this.list.filter(item=>!item.checked)
						}else{
							// 选择是已完成的时候
							this.showList = this.list.filter(item=>item.checked)
						}
					},
					// 选中数据
					hanldChecked(item){
						// 默认的item.checked是false,当点击选中的时候是true,所以需要在判断中取反
						if(!item.checked){
							this.num--
						}else{
							this.num++
						}
					},
					// 清除已完成的按钮事件
					clearYesTodos(){
						//遍历数组this.showList
						for(let i=0;i<this.showList.length;i++){
							//判断符合已完成的任务条件时才执行的操作
							// debugger;
							if(this.showList[i].checked===true){
								// 在这个数组中删除符合已完成的任务的成员，传一个参数就是删除符合条件的成员
								// 第二个参数就是删除的数量（不传入时就不计算需要删除的数量）
								// debugger; 
								this.showList.splice(i);
								console.log(this.showList);
							}
						}
					}
				}
			})
		</script>
	</body>
</html>
